/* eslint no-dupe-keys: 0, no-mixed-operators: 0 */
import { PullToRefresh, ListView, Badge, Button, Toast } from 'antd-mobile';
import ReactDOM from 'react-dom';
import { connect, history } from 'umi';
import scrollAnimation from '@/utils/scrollAnimation';
import LoadingFooter from '../LoadingFooter';
import { putFetch } from '@/utils/doFetch';
import { Row, Col } from 'antd';
import IconFont from '@/components/IconFont';
import { List, Image, Divider } from 'antd';
import moment from 'moment';

let columns = [
    {
      title: '公司名称',
      dataIndex: 'company_name',
      key: 'company_name',
      search: false,
    },
    {
      title: '执照副本数量',
      dataIndex: 'license_copy_num',
      key: 'license_copy_num',
      search: false,
    },
    {
      title: '执照正本数量',
      dataIndex: 'license_original_num',
      key: 'license_original_num',
      search: false,
    },
    {
      title: '公章数量',
      dataIndex: 'official_seal_num',
      key: 'official_seal_num',
      search: false,
    },
    {
      title: '发票章数量',
      dataIndex: 'invoice_seal_num',
      key: 'invoice_seal_num',
      search: false,
    },
    {
      title: '财务章数量',
      dataIndex: 'financial_seal_num',
      key: 'financial_seal_num',
      search: false,
    },
    {
      title: '私章数量',
      dataIndex: 'private_seal_num',
      key: 'private_seal_num',
      search: false,
    },
    {
      title: '收入发票数量',
      dataIndex: 'revenue_invoice_num',
      key: 'revenue_invoice_num',
      search: false,
    },
    {
      title: '成本发票数量',
      dataIndex: 'cost_invoice_num',
      key: 'cost_invoice_num',
      search: false,
    },
    {
      title: '创建人',
      dataIndex: 'creator_name',
      key: 'creator_name',
      search: false,
    },
    {
      title: '身份证号码',
      dataIndex: 'id_card',
      key: 'id_card',
      search: false,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      search: false,
    },
  ],
  statusConf = {
    stalled: '待处理',
    completed: '已处理',
  };

class PublicList extends React.Component {
  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });
    let propsparams = this.props.params ?? {};
    this.state = {
      dataSource,
      loading: false,
      isLoading: true,
      scrolltop: 0,
      refreshing: false,
      dataArr: [],
      isEmpty: false,
      params: { ...propsparams, pageIndex: 1 },
    };
  }

  //获取一段分页数据
  getsectiondata(params) {
    let { post } = this.props;
    post(params).then((res) => {
      if (!res.data) {
        return;
      }
      let dataArr = this.state.dataArr.concat(res.data.list);
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(dataArr),
        isLoading: false,
        refreshing: false,
        hasMore: res.data.hasnextpage,
        dataArr,
        isEmpty: params.pageIndex == 1 && res.data.list.length == 0,
      });
    });
  }

  componentDidMount() {
    this.getsectiondata(this.state.params);
  }

  onRefresh = () => {
    this.setState(
      {
        refreshing: true,
        isLoading: true,
        hasMore: true,
        dataArr: [],
        params: {
          ...this.state.params,
          pageIndex: 1,
        },
      },
      () => {
        this.getsectiondata(this.state.params);
      },
    );
  };

  onEndReached = (event) => {
    if (this.state.isLoading || !this.state.hasMore) {
      return;
    }
    let pageIndex = this.state.params.pageIndex + 1;
    this.setState(
      {
        isLoading: true,
        params: {
          ...this.state.params,
          pageIndex,
        },
      },
      () => {
        this.getsectiondata(this.state.params);
      },
    );
  };

  render() {
    let {
        Header,
        global: { istop },
        dispatch,
        type,
      } = this.props,
      {
        scrolltop,
        dataSource,
        isLoading,
        refreshing,
        hasMore,
        isEmpty,
        loading,
      } = this.state;

    const separator = (sectionID, rowID) => (
      <div
        key={`${sectionID}-${rowID}`}
        style={{
          backgroundColor: '#F5F5F9',
          height: 8,
        }}
      />
    );

    const row = (row) => {
      return type == 'payment_order' ? (
        <div style={{ padding: 12 }} key={row.id}>
          <p
            style={{
              fontSize: 20,
              fontWeight: 'bolder',
              marginBottom: 8,
              alignItems: 'flex-end',
            }}
            className="spacebt"
          >
            <span>
              单号:
              {row.settle_id
                ? (Array(5).join(0) + row.settle_id).slice(-5)
                : '-'}
            </span>
            <span
              style={{ fontWeight: 'normal', color: '#1a91ff', fontSize: 14 }}
            >
              收费日期:{row.payment_time}
            </span>
          </p>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              width: '100%',
              margin: '4px 0',
            }}
          >
            <span>业务类型</span>
            <span style={{ flex: 1, textAlign: 'right' }} className="oneline">
              {row.service_name ? row.service_name : '代账业务'}
            </span>
          </div>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              width: '100%',
              margin: '4px 0',
            }}
          >
            <span>服务开始时间</span>
            <span style={{ flex: 1, textAlign: 'right' }} className="oneline">
              {row.service_start_time}
            </span>
          </div>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              width: '100%',
              margin: '4px 0',
            }}
          >
            <span>服务结束时间</span>
            <span style={{ flex: 1, textAlign: 'right' }} className="oneline">
              {row.service_end_time}
            </span>
          </div>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              width: '100%',
              margin: '4px 0',
            }}
          >
            <span>应收款</span>
            <span style={{ flex: 1, textAlign: 'right' }} className="oneline">
              {row.receivable}
            </span>
          </div>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              width: '100%',
              margin: '4px 0',
            }}
          >
            <span>月收费</span>
            <span style={{ flex: 1, textAlign: 'right' }} className="oneline">
              {row.unit_price}
            </span>
          </div>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              width: '100%',
              margin: '4px 0',
            }}
          >
            <span>实际收款</span>
            <span style={{ flex: 1, textAlign: 'right' }} className="oneline">
              {row.actual_receive}
            </span>
          </div>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              width: '100%',
              margin: '4px 0',
            }}
          >
            <span>付款方式</span>
            <span style={{ flex: 1, textAlign: 'right' }} className="oneline">
              {row.payment_name}
            </span>
          </div>
        </div>
      ) : type == 'account_book' ? (
        <div style={{ padding: 12 }} key={row.id}>
          <p style={{ fontSize: 20, fontWeight: 'bolder', marginBottom: 8 }}>
            {row?.year}
          </p>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            明细账
            <div>
              {row.detail && row.detail.length > 0 ? (
                row.detail.map((it, i) => {
                  return (
                    <a
                      href={it.origin_url}
                      download={it.origin_url}
                      style={{ padding: 8 }}
                      key={i}
                      target={'_blank'}
                    >
                      附件{i + 1}
                    </a>
                  );
                })
              ) : (
                <Image
                  width={40}
                  height={40}
                  src={require('@/assets/default.png')}
                  style={{ padding: 4 }}
                ></Image>
              )}
            </div>
          </div>
          <Divider style={{ margin: '8px 0' }}></Divider>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            总分类账
            <div>
              {row.general_classify && row.general_classify.length > 0 ? (
                row.general_classify.map((it, i) => {
                  return (
                    <a
                      href={it.origin_url}
                      style={{ padding: 8 }}
                      key={i}
                      target={'_blank'}
                    >
                      附件{i + 1}
                    </a>
                  );
                })
              ) : (
                <Image
                  width={40}
                  height={40}
                  src={require('@/assets/default.png')}
                  style={{ padding: 4 }}
                ></Image>
              )}
            </div>
          </div>
          <Divider style={{ margin: '8px 0' }}></Divider>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            年度所得税申报表
            <div>
              {row.year_income_tax && row.year_income_tax.length > 0 ? (
                row.year_income_tax.map((it, i) => {
                  return (
                    <a
                      href={it.origin_url}
                      style={{ padding: 8 }}
                      key={i}
                      target={'_blank'}
                    >
                      附件{i + 1}
                    </a>
                  );
                })
              ) : (
                <Image
                  width={40}
                  height={40}
                  src={require('@/assets/default.png')}
                  style={{ padding: 4 }}
                ></Image>
              )}
            </div>
          </div>
        </div>
      ) : type == 'tax' ? (
        <div style={{ padding: 12 }} key={row.id}>
          <div className="spacebt">
            <span style={{ fontSize: 20, fontWeight: 'bolder' }}>
              {row.declare_time} <br />
              <i
                style={{
                  fontSize: 14,
                  color: '#1a91ff',
                  fontWeight: 'lighter',
                  fontStyle: 'normal',
                }}
              >
                申报会计：{row.account_user_name}
              </i>
            </span>
            <span>{row.tax}</span>
          </div>
        </div>
      ) : type == 'bc' ? (
        <div style={{ padding: 12 }} key={row.id}>
          <div className="spacebt">
            <span style={{ fontSize: 20, fontWeight: 'bolder' }}>
              {row.declare_time} <br />
              <i
                style={{
                  fontSize: 14,
                  color: '#1a91ff',
                  fontWeight: 'lighter',
                  fontStyle: 'normal',
                }}
              >
                申报会计：{row.account_user_name}
              </i>
            </span>
            <div>
              {row.images.map((it) => {
                return (
                  <Image
                    width={60}
                    height={60}
                    src={it.origin_url}
                    style={{ padding: 4 }}
                  ></Image>
                );
              })}
            </div>
          </div>
        </div>
      ) : type == 'voucher' ? (
        <div style={{ padding: 12 }} key={row.id}>
          <div className="spacebt">
            <span style={{ fontSize: 20, fontWeight: 'bolder' }}>
              {row.voucher_date} <br />
              <i
                style={{
                  fontSize: 14,
                  color: '#1a91ff',
                  fontWeight: 'lighter',
                  fontStyle: 'normal',
                }}
              >
                凭证条码号：{row.voucher_barcode}
              </i>
            </span>
            <span>{row.process_status_name}</span>
          </div>
          <Button
            loading={loading}
            style={{ marginTop: 12, borderRadius: 0 }}
            type="primary"
            disabled={row.process_status == 'completed'}
            onClick={() => {
              this.setState({
                loading: true,
              });
              putFetch({
                url: `/wbn-api/wechat/customers/voucher/${row.id}`,
                params: {},
              }).then((res) => {
                this.setState({
                  loading: false,
                });
                if (res.code == 0) {
                  Toast.success('操作成功');
                  this.onRefresh();
                }
              });
            }}
          >
            {row.process_status == 'completed' ? '已完成' : '确认收到'}
          </Button>
        </div>
      ) : type == 'feedback_list' ? (
        <div style={{ padding: 12 }} key={row.id}>
          <p
            style={{
              fontSize: 20,
              fontWeight: 'bolder',
              marginBottom: 8,
              alignItems: 'flex-end',
            }}
            className="spacebt"
          >
            <span>投诉类型</span>
            <span style={{ color: '#ff6800' }}>
              {row.complaint_setting_name ?? ''}
            </span>
          </p>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              width: '100%',
              margin: '4px 0',
            }}
          >
            <span>备注</span>
            <span style={{ flex: 1, textAlign: 'right' }} className="oneline">
              {row.customer_remark}
            </span>
          </div>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              width: '100%',
              margin: '4px 0',
            }}
          >
            <span>处理信息</span>
            <span style={{ flex: 1, textAlign: 'right' }} className="oneline">
              {row.user_remark}
            </span>
          </div>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              width: '100%',
              margin: '4px 0',
            }}
          >
            <span>状态</span>
            <span style={{ flex: 1, textAlign: 'right' }} className="oneline">
              {statusConf[row.status]}
            </span>
          </div>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              width: '100%',
              margin: '4px 0',
            }}
          >
            <span>投诉时间</span>
            <span style={{ flex: 1, textAlign: 'right' }} className="oneline">
              {moment(row.created_at).format('YYYY-MM-DD HH:mm:ss')}
            </span>
          </div>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              width: '100%',
              margin: '4px 0',
            }}
          >
            <span>投诉主体</span>
            <span style={{ flex: 1, textAlign: 'right' }} className="oneline">
              {row.company_name}
            </span>
          </div>
        </div>
      ) : (
        <List.Item style={{ padding: 12 }} key={row.id}>
          <div style={{ width: '100%' }}>
            {columns.map((it) => {
              return (
                <p
                  style={{
                    width: '100%',
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                  }}
                >
                  <span>{it.title}：</span>
                  <span>{row[it.dataIndex]}</span>
                </p>
              );
            })}
            <div
              style={{
                width: '100%',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
              }}
            >
              <span>状态：</span>
              <span>
                {row.status == 'stalled'
                  ? '未开始'
                  : row.status == 'pending'
                  ? '交接中'
                  : row.status == 'completed'
                  ? '已完成'
                  : ''}
              </span>
            </div>
            <Row style={{ width: '100%', marginTop: 12 }}>
              {/* <Col span={12}>
                <Button
                  style={{ width: '100%', borderRadius: 0 }}
                  type="warning"
                  loading={loading}
                  disabled={row.status == 'pending'}
                  onClick={() => {
                    this.setState({
                      loading: true,
                    });
                    putFetch({
                      url: '/wbn-api/wechat/customers/resource/hand_over',
                      params: { id: row.id },
                    }).then((res) => {
                      this.setState({
                        loading: false,
                      });
                      if (res.code == 0) {
                        Toast.success('操作成功');
                        this.onRefresh();
                      }
                    });
                  }}
                >
                  交接
                </Button>
              </Col> */}
              {row.is_company == false ? (
                <a
                  style={{
                    textAlign: 'right',
                    display: 'block',
                    width: '100%',
                  }}
                >
                  交接给吾帮你
                </a>
              ) : (
                <Col span={24}>
                  <Button
                    style={{ width: '100%', borderRadius: 0 }}
                    type="primary"
                    loading={loading}
                    disabled={row.status != 'pending'}
                    onClick={() => {
                      this.setState({
                        loading: true,
                      });
                      putFetch({
                        url: '/wbn-api/wechat/customers/resource/confirm_hand_over',
                        params: { id: row.id },
                      }).then((res) => {
                        this.setState({
                          loading: false,
                        });
                        if (res.code == 0) {
                          Toast.success('操作成功');
                          this.onRefresh();
                        }
                      });
                    }}
                  >
                    确认接收
                  </Button>
                </Col>
              )}
            </Row>
          </div>
        </List.Item>
      );
    };

    return (
      <ListView
        ref={(el) => (this.lv = el)}
        dataSource={dataSource}
        renderHeader={() => (
          <Header scrolltop={scrolltop} scrollRef={this.lv} />
        )}
        renderFooter={() => (
          <LoadingFooter
            isLoading={isLoading && hasMore}
            isEmpty={isEmpty}
          ></LoadingFooter>
        )}
        renderRow={row}
        renderSeparator={separator}
        style={{
          overflow: 'auto',
        }}
        pageSize={10}
        onScroll={(e) => {
          this.setState({
            scrolltop: e.target.scrollTop,
          });
          if (e.target.scrollTop > 400) {
            if (istop === true) {
            } else {
              dispatch({
                type: 'global/istop',
                payload: true,
              });
            }
          } else {
            if (istop === false) {
            } else {
              dispatch({
                type: 'global/istop',
                payload: false,
              });
            }
          }
        }}
        scrollRenderAheadDistance={800}
        distanceToRefresh={window.devicePixelRatio * 25}
        onEndReached={this.onEndReached}
        onEndReachedThreshold={10}
        pullToRefresh={
          <PullToRefresh refreshing={refreshing} onRefresh={this.onRefresh} />
        }
      />
    );
  }
}

export default connect(({ global, loading }) => ({
  global,
  loading,
}))(PublicList);
